<template>
	<view class="authentication">
		<!-- 步骤条 -->
		<u-steps current="1" v-if="user_info.real==-1" activeColor='#EE4133'>
			<u-steps-item title="登录成功"></u-steps-item>
			<u-steps-item title="信息完善"></u-steps-item>
		</u-steps>
		<!-- 审核状态原因 -->
		<u-alert title="审核中" center fontSize='17' type="warning" v-if="user.status==0"></u-alert>
		<u-alert title="审核失败" center fontSize='17' type="error" v-if="user.status==1"
			:description='error_text'></u-alert>
		<u-alert title="审核成功" center fontSize='17' type="success" v-if="user.status==2"></u-alert>
		<!-- 信息输入框 -->
		<view class="inp  p030 flex jsb ac">
			<view class="title">
				店名及联系人:
			</view>
			<view class="">
				<u--input placeholder="请输入" :readonly="status" border="none" v-model="user.name" inputAlign="right"
					@change="change"></u--input>
			</view>
		</view>
		<u-line color="#E4E7ED" />
		<!-- <view class="inp   p030 flex jsb ac">
			<view class="title">
				身份证号：
			</view>
			<view class="">
				<u--input placeholder="请输入" :readonly="status" border="none" v-model="user.sfz" inputAlign="right"
					@change="changesfz"></u--input>
			</view>
		</view> -->
		<!-- <u-line color="#E4E7ED" /> -->
		<view class="inp   p030 flex jsb ac">
			<view class="title">
				联系电话：
			</view>
			<view class="">
				<u--input placeholder="请输入" :readonly="status" border="none" v-model="user.phone" inputAlign="right"
					@change="changephone"></u--input>
			</view>
		</view>
		<u-line color="#E4E7ED" />
		<view class="inp   p030 flex jsb ac">
			<view class="title">
				店铺地址：
			</view>
			<view class="address f_j" @click="open_location">
				<view class="">
					{{user.address?user.address:'请选择'}}
				</view>
				<image src="../../static/public/go_h.png" mode=""></image>
			</view>
		</view>
		<u-line color="#E4E7ED" />
		<!-- <view class="flex jsb ac" style="padding: 30rpx;">
			<view class="title">
				详细地址：
			</view>
			<view class="" style="width: 300rpx;">
				<u--textarea v-model="user.address_detail" border="none" autoHeight
					placeholder="请输入店铺详细地址"></u--textarea>
			</view>
		</view> -->
		<!-- <u-line color="#E4E7ED" /> -->
		<!-- 相关证件 -->
		<!-- <view class="about p030">
			<view class="title">
				相关证件
			</view>
			<view class="ul">
				<view class="up flex jc ac" v-if="user.yy_image==''" @click="upabout(1)">
					<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
				</view>
				<view class="upok" v-else @click="previewImage(1)">
					<image class="img w100h100" :src="user.yy_image" mode="aspectFill"></image>
				</view>
				<view class="information">
					营业执照
				</view>
				<view class="delete" v-if="user.yy_image!=''&&!status">
					<u-icon name="close-circle-fill" color="#EE4133" size="30" @click="deletephoto(1)"></u-icon>
				</view>
			</view>
			<view class="ul">
				<view class="up flex jc ac" v-if="user.aboutphoto==''" @click="upabout(2)">
					<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
				</view>
				<view class="upok" v-else @click="previewImage(2)">
					<image class="img w100h100" :src="user.aboutphoto" mode="aspectFill"></image>
				</view>
				<view class="information">
					食品经营许可证
				</view>
				<view class="delete" v-if="user.aboutphoto!=''&&!status">
					<u-icon name="close-circle-fill" color="#EE4133" size="30" @click="deletephoto(2)"></u-icon>
				</view>
			</view>
			<view class="ul">
				<view class="up flex jc ac" v-if="user.image==''" @click="upabout(3)">
					<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
				</view>
				<view class="upok" v-else @click="previewImage(3)">
					<image class="img w100h100" :src="user.image" mode="aspectFill"></image>
				</view>
				<view class="information">
					门店照片
				</view>
				<view class="delete" v-if="user.image!=''&&!status">
					<u-icon name="close-circle-fill" color="#EE4133" size="30" @click="deletephoto(2)"></u-icon>
				</view>
			</view>
			<view class="ul">
				<view class="up flex jc ac" v-if="user.ws_image==''" @click="upabout(3)">
					<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
				</view>
				<view class="upok" v-else @click="previewImage(3)">
					<image class="img w100h100" :src="user.ws_image" mode="aspectFill"></image>
				</view>
				<view class="information">
					卫生许可
				</view>
				<view class="delete" v-if="user.ws_image!=''&&!status">
					<u-icon name="close-circle-fill" color="#EE4133" size="30" @click="deletephoto(3)"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 本人身份证证件 -->
		<!-- <view class="oneself p030">
			<view class="title">
				本人身份证证件
			</view>
			<view class="ul flex flexwrap f_z_b">
				<view class="lis" v-for="(item,index) in user_list" :key="index">
					<view class="li">
						<view class="up flex jc ac w100h100" v-if="item.url==''" @click="upphotos(index)">
							<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
						</view>
						<image class="upok w100h100" :src="item.url" mode="aspectFill" v-else
							@click="previewImages(index)">
						</image>
					</view>
					<view class="information">
						{{item.title}}
					</view>
					<view class="delete" v-if="item.url!=''&&!status" @click="deletephotos(index)">
						<u-icon name="close-circle-fill" color="#EE4133" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view> -->
		<view class="oneself p030">
			<view class="title">
				店铺图片
			</view>
			<view class="ul flex flexwrap f_z_b">
				<view class="lis">
					<view class="li">
						<view class="up flex jc ac w100h100" v-if="user.image==''" @click="upphotos('dp')">
							<u-icon name="plus" color="#CCCCCC" size="56"></u-icon>
						</view>
						<image class="upok w100h100" :src="user.image" mode="aspectFill" v-else
							@click="previewImagedp()">
						</image>
					</view>
					<view class="information">
						店铺图片
					</view>
					<view class="delete" v-if="user.image!=''&&!status" @click="deletephotos('dp')">
						<u-icon name="close-circle-fill" color="#EE4133" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 申请认证 -->
		<view class="but m030 flex jc ac" @click="authentication_btn">
			{{user.status!=-1?status_text:'申请认证'}}
		</view>
		<view class="Bench"></view>
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import {
		authentication
	} from "@/api/page.js"
	// import {
	// 	upload_img
	// }
	// from "@/api/public.js"
	import {
		userInfo
	} from "@/api/user.js"
	export default {
		onLoad() {
			this.stateuser()
		},
		computed: {
			...mapState(['user_info'])
		},
		data() {
			return {
				status: false, //控制是否已经实名,实名过后不可修改 true已实名
				state_user: {}, //初始化数据
				user: {
					name: "",
					phone: "",
					sfz: "",
					address: '',
					address_detail: '',
					longitude: '',
					latitude: '',
					aboutphoto: "", //展示地址
					status: -1, //-1未申请 0=未审核,1=审核失败,2=审核成功
					yy_image: '',
					ws_image: '',
					image: ''
				},
				status_text: "",
				user_list: [{
						url: "",
						title: "身份证正面"
					},
					{
						url: "",
						title: "身份证反面"
					},
					{
						url: "",
						title: "手持身份证照片"
					},
					{
						url: "",
						title: "自拍照"
					}
				],
				error_text: '',
			};
		},
		methods: {
			...mapActions(['get_user']),
			stateuser() {
				let that = this;
				userInfo().then(res => {
					that.error_text = res.data.real_info.refuse
					that.state_user = res.data.real_info;
					that.user.name = that.state_user.name;
					that.user.phone = that.state_user.tel;
					// that.user.sfz = that.state_user.card;
					// that.user.latitude = that.state_user.latitude;
					// that.user.longitude = that.state_user.longitude;
					that.user.status = that.state_user.status;
					that.user.address = that.state_user.address;
					// that.user.address_detail = that.state_user.address_detail;
					// that.user.aboutphoto = that.$newbeasUrl + that.state_user.xk_image;
					// that.user.yy_image = that.$newbeasUrl + that.state_user.yy_image;
					// that.user.ws_image = that.$newbeasUrl + that.state_user.ws_image;
					that.user.image = that.$newbeasUrl + that.state_user.image;
					// that.user_list[0].url = that.$newbeasUrl + that.state_user.front_image;
					// that.user_list[1].url = that.$newbeasUrl + that.state_user.back_image;
					// that.user_list[2].url = that.$newbeasUrl + that.state_user.sc_image;
					// that.user_list[3].url = that.$newbeasUrl + that.state_user.zp_image;
					let flag = that.user_list.every(item => {
						return item.url != ''
					})
					console.log(flag, "这是状态");
					// if (that.user.name != '' &&
					// 	that.user.phone != '' &&
					// 	that.user.sfz != '' &&
					// 	that.user.aboutphoto != '' && flag) {
					// 	that.status = true
					// }
					if (that.state_user.status == 2 || that.state_user.status == 0) {
						that.status = true
					}
					if (that.user.status != -1) {
						that.user.status == 0 ? that.status_text = '待审核' : that.user.status == 1 ? that
							.status_text = '重新提交' :
							that.user.status == 2 ? that.status_text = '审核成功' : ''
						// that.$publicfun.showToast(res.msg)
						// return
					}
				})
			},
			//上传认证信息
			authentication_btn() {
				if (this.user.status == 2 || this.user.status == 0) {
					this.$publicfun.showToast(this.status_text)
					return
				}
				// 非空判断
				if (this.is_kong()) {
					return
				}
				authentication({
					type: 3,
					name: this.user.name,
					// card: this.user.sfz,
					tel: this.user.phone,
					address: this.user.address,
					// address_detail: this.user.address_detail,
					// longitude: this.user.longitude,
					// latitude: this.user.latitude,
					// yy_image: this.$publicfun.removeDomainFromUrl(this.user.yy_image),
					// xk_image: this.$publicfun.removeDomainFromUrl(this.user.aboutphoto),
					// ws_image: this.$publicfun.removeDomainFromUrl(this.user.ws_image), //非必填
					// front_image: this.$publicfun.removeDomainFromUrl(this.user_list[0].url), //人像面
					// back_image: this.$publicfun.removeDomainFromUrl(this.user_list[1].url), //国徽面
					// sc_image: this.$publicfun.removeDomainFromUrl(this.user_list[2].url),
					// zp_image: this.$publicfun.removeDomainFromUrl(this.user_list[3].url),
					image: this.$publicfun.removeDomainFromUrl(this.user.image)
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.get_user()
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/me/me'
							})
						}, 1000)
					}
					this.$publicfun.showToast(res.msg)
				})
			},
			change(e) {
				console.log('change', e);
			},
			changesfz(e) {
				let flag = this.$publicfun.hideIdCardMiddle(e)
				console.log('change', e, flag);
			},
			changephone(e) {
				let flag = this.$publicfun.validatePhoneNumber(e)
				console.log('change', e, flag);
			},
			async upabout(type) {
				let url = await this.$publicfun.upImage(1)
				this.upload_img(url.tempFilePaths[0]).then(res => {
					// console.log(res);
					if (type == 1) {
						this.user.yy_image = res.data.fullurl
					} else if (type == 2) {
						this.user.aboutphoto = res.data.fullurl
					} else {
						this.user.ws_image = res.data.fullurl
					}
				})
			},
			deletephoto(type) {
				if (type == 1) {
					this.user.yy_image = ""
				} else if (type == 2) {
					this.user.aboutphoto = ""
				} else {
					this.user.ws_image = ""
				}
			},
			deletephotos(i) {
				if (i == 'dp') {
					this.user.image = ''
				} else {
					this.user_list[i].url = ''
				}
			},
			async upphotos(i) {
				let url = await this.$publicfun.upImage(1)
				this.upload_img(url.tempFilePaths[0]).then(res => {
					if (i == 'dp') {
						this.user.image = res.data.fullurl
					} else {
						this.user_list[i].url = res.data.fullurl
					}
				})
			},
			previewImage(i) {
				if (i == 1) {
					this.$publicfun.previewImage({
						url: this.user.yy_image
					})
				} else if (i == 2) {
					this.$publicfun.previewImage({
						url: this.user.aboutphoto
					})
				}

			},
			previewImages(i) {
				this.$publicfun.previewImage({
					url: this.user_list[i].url
				})
			},
			previewImagedp() {
				this.$publicfun.previewImage({
					url: this.user.image
				})
			},
			is_kong() {
				if (!this.user.name) {
					this.$publicfun.showToast('请输入姓名')
					return true
				}
				// if (!this.user.sfz) {
				// 	this.$publicfun.showToast('请输入身份证号')
				// 	return true
				// }
				if (!this.user.phone) {
					this.$publicfun.showToast('请输入手机号')
					return true
				}
				if (!this.user.address) {
					this.$publicfun.showToast('请选择店铺地址')
					return true
				}
				// if (!this.user.address_detail) {
				// 	this.$publicfun.showToast('请输入店铺详细地址')
				// 	return true
				// }
				// if (!this.user.yy_image) {
				// 	this.$publicfun.showToast('请上传营业执照')
				// 	return true
				// }

				// if (!this.user.aboutphoto) {
				// 	this.$publicfun.showToast('请上传食品经营许可')
				// 	return true
				// }
				// if (!this.user.ws_image) {
				// 	this.$publicfun.showToast('请上传卫生许可')
				// 	return true
				// }
				// if (!this.user.image) {
				// 	this.$publicfun.showToast('请上传店铺图片')
				// 	return true
				// }
				// for (let i = 0; i <= 3; i++) {
				// 	if(){}
				// 	if (this.user_list[i].url == '') {
				// 		this.$publicfun.showToast(`请上传${this.user_list[i].title}`)
				// 		return true
				// 	}
				// }
			},
			open_location() {
				uni.chooseLocation({
					success: (res) => {
						this.user.address = res.address
						this.user.latitude = res.latitude
						this.user.longitude = res.longitude
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authentication {
		.but {
			// width: 100%;
			margin-top: 50rpx;
			height: 85rpx;
			background: #EE4133;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.inp {
			height: 93rpx;

			.title {
				font-size: 28rpx;
				color: #232323;
			}

			.address {
				image {
					margin-left: 15rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.about {
			margin-top: 38rpx;

			.ul {
				width: 320rpx;
				position: relative;
			}

			.delete {
				position: absolute;
				right: 0;
				top: 0rpx;
			}

			.title {
				font-size: 32rpx;
				color: #3D3D3D;
				font-weight: bolder;
			}

			.information {
				font-size: 28rpx;
				color: #3D3D3D;
				text-align: center;
			}

			.up {
				height: 219rpx;
				background: #F8F9FC;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx dotted #999999;
				margin: 48rpx 0 26rpx 0;
			}

			.upok {
				height: 219rpx;
				margin: 48rpx 0 26rpx 0;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.img {}
			}
		}

		.oneself {
			margin-top: 69rpx;

			.title {
				font-size: 32rpx;
				color: #3D3D3D;
				font-weight: bolder;
				margin-bottom: 26rpx;
			}

			.ul {

				.lis {
					// margin-right: 20rpx;
					margin-bottom: 48rpx;
					position: relative;
				}

				.delete {
					position: absolute;
					top: 5rpx;
					right: 0rpx;
				}

				.li {
					width: 320rpx;
					height: 219rpx;
					margin-bottom: 26rpx;

					.up {
						background: #F8F9FC;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 1rpx dotted #999999;
					}

					.upok {}

				}

				.information {
					font-size: 28rpx;
					color: #3D3D3D;
					text-align: center;
				}

				.lis:nth-child(2n+2) {
					margin-right: 0rpx !important;
				}
			}
		}

	}
</style>